<template>

	<view class="page ">
		<view class="top-content">
			<view class="invite-box1-1">
				<view class="invite-box1-1-top">每成功邀请一个好友注册</view>
				<view class="invite-box1-1-two">送<text>50</text>积分
				</view>
			</view>
			<view class="gz">
				积分规则
			</view>
			<!-- <view class="button" @tap="openshare">
				立即邀请
			</view> -->
		</view>
		<view class="bot-content-wapper">
			<u-form ref="formdom" label-position="top" errorType="toast" style="margin-top:30rpx;padding: 0 53rpx;"
				:model="state.formdata" :rules="rules">

				<u-form-item prop="mobile">
					<view class="login_input">
						<image src="/static/icon_amount.png" class="lefticon" mode="heightFix"></image>
						<input class="back_1 flex-1" v-model="state.formdata.mobile" maxlength="11"
							placeholder="请输入手机号" />

					</view>

				</u-form-item>
				<u-form-item prop="password">
					<view class="login_input">
						<image src="/static/icon_password.png" class="lefticon" mode="heightFix"></image>
						<input class="back_1" type="password" v-model="state.formdata.password" placeholder="请输入密码" />

					</view>

				</u-form-item>

				<u-form-item prop="code">
					<view class="login_input">
						<image src="/static/icon_password.png" class="lefticon" mode="heightFix"></image>
						<input class="back_1" type="text" v-model="state.formdata.code" placeholder="验证码" />

						<view class="code-button" @tap="getCode">
							{{state.tips}}
						</view>

					</view>

				</u-form-item>
				<u-form-item prop="share_code">
					<view class="login_input">
						<image src="/static/icon_invcode.png" class="lefticon" mode="heightFix"></image>
						<input class="back_1" type="text" :disabled="true" v-model="state.formdata.share_code" placeholder="邀请码" />
				
						
				
					</view>
				
				</u-form-item>


<u-code :seconds="60" ref="codedom"  @change="codeChange"></u-code>
				<button class="logo-button" @tap="onsubmit">注册 </button>
			</u-form>



		</view>



	</view>
</template>

<script setup>
	import LC from '@/LC';
	import UQRCode from '../../uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
	import {
		computed,
		reactive,
		ref,
		onMounted,
		getCurrentInstance,
		nextTick
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app'


	function back() {
		LC.$router.back()
	}

	let formdom = ref(null)



	function codeChange(text) {

		state.tips = text;
	}
	let codedom = ref(null)

	async function getCode() {

		if (codedom.value.canGetCode) {
			// 模拟向后端请求验证码
			uni.showLoading({

			})
			await LC.$api.user.smssend({
				mobile: state.formdata.mobile,
				type: 1
			})
			codedom.value.start();
			uni.hideLoading({

			})
		} else {
			uni.hideLoading({

			})

		}




	}
	const rules = {

		mobile: [{
				required: true,
				message: '请输入手机号',
				trigger: ['blur', 'change']
			},
			{
				validator: (rule, value, callback) => {
					// 上面有说，返回true表示校验通过，返回false表示不通过
					// uni.$u.test.mobile()就是返回true或者false的
					return uni.$u.test.mobile(value);
				},
				message: "手机号格式不正确",
				trigger: ['blur', 'change']
			}
		],
		code: [{
			required: true,
			message: '请输入验证码',
			trigger: ['blur', 'change']
		}],
		share_code: [{
			required: true,
			message: '请输入邀请码',
			trigger: ['blur', 'change']
		}],
		password: [{
				required: true,
				message: '请输入注册密码',
				trigger: ['blur', 'change']
			},
			{
				min: 6,
				max: 10,
				message: "长度6-10位",
				trigger: ['blur', 'change']
			}
		],

	}
	let state = reactive({

		ishow: false,
		ishow1: false,
		tips: '',
		formdata: {
			mobile: "",
			password: '',
			code: '',
			share_code:''

		},

	})


	function onsubmit() {
		// if (!state.agreen) {
		// 	uni.$u.toast('请勾选协议')
		// 	return
		// }
		formdom.value.validate().then(res => {
			send()
		}).catch(err => {
			formdom.value.clearValidate()

			console.log('表单错误信息：', err);
		})
	}
	async function send() {

		const res = await LC.$api.user.register(state.formdata)
		if (res.code == 1) {
			
			uni.$u.toast('注册成功')
			uni.reLaunch({
				url:'/pages/auth/login'
			})
		}


	}

	onLoad(({code}) => {
	if(code){
		state.formdata.share_code=code
	}


	})
</script>

<style lang="scss">
	.fixed {
		position: fixed;
		top: 280rpx;
		left: 50vw;
		z-index: 22222;
		transform: translateX(-50%);
		background-color: #EAEAEA;
		padding: 50rpx 40rpx;
	}

	.bot-content {
		width: 690rpx;
		height: 88rpx;
		background: #ffedeb;
		border-radius: 20rpx 20rpx 0 0;
		margin: -100rpx 30rpx 0 30rpx;
		position: relative;
		z-index: 2;
		display: flex;
		justify-content: space-around;
		line-height: 88rpx;

	}

	.bot-content-wapper {
		background-color: #fff;
		border-radius: 30rpx;
		margin: 0 30rpx;
		padding: 30rpx 0;
		z-index: 2222;
		position: relative;
		margin-top: -120rpx;
	}

	.logo-button {


		height: 86rpx;

		margin-bottom: 59rpx;
		flex-shrink: 0;
		margin-top: auto;
		background: #fc7460;
		border-radius: 42px;
		font-weight: 400;
		font-size: 27rpx;
		width: 100%;
		line-height: 86rpx;
		color: #fff;
		margin-top: 73rpx;

		&.dis {
			background-color: #CCCCCC;
		}

		&::after {
			display: none;
		}


	}

	.login_input {
		display: flex;
		width: 100%;
		height: 86rpx;
		align-items: center;
		padding: 0 40rpx;
		box-sizing: border-box;
		background: #F7F8FA;
		border-radius: 63rpx;
		opacity: 1;

		.lefticon {
			height: 32rpx;
			width: 32rpx;
			// u-icon {
			// 	margin-left: 5rpx;
			// }
		}

		input {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 27rpx;
			color: #999999;
			line-height: 38rpx;
			margin-left: 15rpx;
			flex: 1
		}

		.pass_view {
			width: 31rpx;
		}

	}


	.status-bar {
		height: var(--status-bar-height);
	}


	.top-content {
		background: url(/static/yqbg.png);
		height: 722rpx;
		background-size: 100% 100%;
		position: relative;

		.gz {
			width: 156rpx;
			height: 60rpx;
			background: #fc7460;
			border-top-left-radius: 30rpx;
			border-bottom-left-radius: 30rpx;
			font-size: 26rpx;
			font-weight: 600;
			color: #fff;
			text-align: center;
			line-height: 60rpx;
			position: absolute;
			right: 0;
			top: 30rpx;
			z-index: 1;
		}

		.button {
			width: 240rpx;
			height: 78rpx;
			background: linear-gradient(0deg, #e9af6f, #fde6ca);
			border-radius: 40rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #5a3b1a;
			line-height: 78rpx;
			text-align: center;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 120rpx;
		}

		.invite-box1-1 {
			position: absolute;
			font-size: 26rpx;
			font-weight: 400;
			color: #ec5c37;
			line-height: 60rpx;

			top: 280rpx;
			left: 240rpx;
			width: 290rpx;
			z-index: 2;

			&-two {
				text-align: center;
				font-size: 28rpx;
				font-weight: 400;
				color: #ec5c37;
				line-height: 60px;

				text {
					font-size: 68rpx;
					font-weight: 700;
					color: #fa2b28;
					padding: 0 10rpx;

				}
			}
		}
	}

	.title {

		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 38rpx;
		color: #333333 !important;
		line-height: 53rpx;
		position: relative;

	}

	.title1 {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 23rpx;
		color: #FC5652;
		margin-top: 23rpx;

		image {
			width: 25rpx;
			height: 14rpx;
		}
	}

	.image {
		display: flex;

		width: 613rpx;
		margin: 0 auto;
		margin-top: 99rpx;
		margin-bottom: 137rpx;
		height: 613rpx;
	}

	.data-content {
		border-radius: 19px;
		border: 2rpx solid #EAEAEA;
		padding: 0 21rpx;

		.item {
			padding: 25rpx 0;

			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 27rpx;
				color: #333333;
				line-height: 38rpx;
			}

			.link {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 27rpx;
				margin-left: auto;
				color: #333333;
				line-height: 38rpx;
			}

			image {
				margin-left: 25rpx;
				width: 53rpx;
				height: 53rpx;
			}
		}
	}

	.top_icon {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 31rpx;
		color: #333333;
		line-height: 42rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.page {}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>